<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>08Vue事件处理</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<h1>example-1 ----监听事件 v-on</h1>
<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <button @click="counter += 1">Add 2</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
<script type="text/javascript">
	var example1 = new Vue({
	  el: '#example-1',
	  data: {
	    counter: 0
	  }
	})
</script>

<h1>example-2---事件处理方法 </h1>
<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
<script type="text/javascript">
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})	
</script>

<h1>example-3---内联处理器中的方法-----<h1>
<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
  <button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
</div>
<script type="text/javascript">
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    },
    warn: function (message, event) {
	    // 现在我们可以访问原生事件对象
	    if (event) {
	    	alert("hello")
	      event.preventDefault()
	    }
    	alert(message)
  	}
  }

})
</script>

<h1>example-4 ---事件修饰符----------------</H1>
<div id="example-4"> 
	<a href="http://www.baidu.com" @click="testA">TestA百度一下</a> 
	<!-- 阻止a标签跳转，仅执行函数testA -->
	<a href="http://www.baidu.com" @click.prevent="testA">
		TestB百度一下(click.prevent=)
	</a>   
	
	<form  action="/xxx"   @submit.prevent="testB"> 
	  	<!-- //阻止表单提交，仅执行函数test5 -->
	    <input type="submit" value="TestB注册">
	</form>

	<div @click="testA">
		<a href="http://www.baidu.com" v-on:click="testC">TestC(没有stop) </a>
	</div>

	<div @click="testA">
		<a href="http://www.baidu.com" v-on:click.stop="testC">TestC(有stop)，能阻止上层的事件 </a>
	</div>
	
	<div @click="testA">
		<a  v-on:click.stop.prevent="testC">TestC(stop.prevent) </a>
	</div>
	<div v-on:click.capture="testA">
		<a href="http://www.baidu.com" v-on:click="testC">TestC(没有stop,上层使用capture) </a>
	</div>
	<div v-on:click.self="testA">
		<a href="http://www.baidu.com" v-on:click="testC">TestC(没有stop,self) </a>
	</div>
	
	
</div>
<script type="text/javascript">
	var example1 = new Vue({
	  el: '#example-4',
	  data: {
	    counter: 0
	  },
	  methods:{
	  	testA:function(){
	  		console.log("-------testA---------");
	  		alert("-------testA---------");
	  	},
	  	testB:function () {
	  		console.log("-------testB---------");
	  		alert("-------testB---------");
	  	},
	  	testC:function () {
	  		console.log("-------testC---------");
	  		alert("-------testC---------");
	  	},
	  }
	})
</script>
<h1>example-5 ---按键修饰符</h1>
<div id="example-5">
	<button v-on:keyup.enter="submit">
		键盘Enter
	</button>
	<button  v-on:keyup.page-down="onPageDown">
		键盘PageDown
	</button>
</div>
<script type="text/javascript">
 new Vue({
  el: '#example-5',

  // 在 `methods` 对象中定义方法
  methods: {
    submit: function (event) {
 
      // `event` 是原生 DOM 事件
      if (event) {
        alert('Hello ' + event.target.tagName)
      }
    },
    onPageDown:function(event){
    	alert('Hello ' + event.target.tagName)
    },
  }
})		
</script>
<h1>example-5-1 ---按键修饰符native-------</h1>
<a href="https://www.cnblogs.com/qjuly/p/8881982.html">参考学习地址</a>
<div id = "example-5-1">
   <my-component @click="i_said"></my-component>
   <my-component-a @say="i_said"></my-component-a>
   <button @click="i_said">点击我</button>
   <my-component @click.native="i_said"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component', {
  template: "<button>component点击我</button>",
})
Vue.component("my-component-a", {
   template: "<button @click='greet'>点击我</button>",
   methods:{
     greet(){
        this.$emit("say", "Hello world");
     }
   }
})

new Vue({
  el:"#example-5-1",
  methods:{
    i_said(){
       alert("Hello world");
    }
  }
})
</script>
<h1>example-6 ---系统修饰符</h1>

</body>
</html>